<template>
  <div class="app-container">
  	<div class="distribution_mask">
  			<div class="maskcon">
  				<i class="iconfont icon-naozhong"></i>
  				<p>即将开放，敬请期待~</p>
  			</div>
  	</div>
    <div class="app-container__body distribution_list">
    		<div class="body_title">
        	 <!--<div class="pull-right">
        	 		<el-button type="borderCyan" plain @click="$router.push('/publish/templateBuild/1')">搭建店铺 <i class="el-icon-arrow-right"></i></el-button>
        	 </div>-->
        	 <h3>内容市场</h3>
        </div>
        <div class="body_content">
        		<ul class="count_list">
        				<li>
        						<div class="list_l">
        								<p>今日渠道推广订单</p>
        								<h3>1000</h3>
        								<span>( 30分钟更新一次 )</span>
        						</div>
        						<div class="list_r">
        								<p>渠道累计推广订单</p>
        								<h3>--</h3>
        								<span>( 30分钟更新一次 )</span>
        						</div>
        				</li>
        				<li>
        						<div class="list_l">
        								<p>今日订单总金额(元)</p>
        								<h3>1000</h3>
        								<span>( 30分钟更新一次 )</span>
        						</div>
        						<div class="list_r">
        								<p>累计订单总金额(元)</p>
        								<h3>--</h3>
        								<span>( 30分钟更新一次 )</span>
        						</div>
        				</li>
        				<li>
        						<div class="list_l">
        								<p>今日总收益(元)</p>
        								<h3>1000</h3>
        								<span>( 30分钟更新一次 )</span>
        						</div>
        						<div class="list_r">
        								<p>累计总收益(元)</p>
        								<h3>--</h3>
        								<span>( 30分钟更新一次 )</span>
        						</div>
        				</li>
        		</ul>
        		<el-tabs v-model="distributionTabs" @tab-click="handleClick">
					    <el-tab-pane label="分销商品" name="first">
					    		<el-row class="search-box clearfix">
						        <el-col :span="16">
						          <el-input v-model="params.key" type="text" placeholder="搜索关键词" prefix-icon="el-icon-search" style="width:300px;"></el-input>
						        </el-col>
						        <el-col :span="8" class="btns">
						          <!--<el-button type="primary" @click="onSearch">搜索</el-button>-->
						          <el-button  type="borderCyan">导出渠道订单</el-button>
						        </el-col>
						      </el-row>
						      <div class="gridtable-box">
						        <el-table class="gridtable" :data="resp.bookList">
						          <el-table-column prop="cover" label="渠道名称" align="center" min-width="200">
						            <template slot-scope="scope">
						              <img :src="scope.row.cover" class="book-cover" />
						            </template>
						          </el-table-column>
						          <el-table-column prop="title" label="采购商品总数" align="left" >
						            <template slot-scope="scope">
						              <p class="book-tit">{{scope.row.title}}</p>
						              <p class="book-info"><span>{{formatDate(scope.row.publishDate)}}</span><span><i class="el-icon-view"></i> {{scope.row.pv}}</span></p>
						            </template>
						          </el-table-column>
						          <el-table-column prop="qrcode" label="推广订单总数" align="center">
						            <template slot-scope="scope">
						              <el-popover placement="bottom" width="170" trigger="click">
						                <p class="book-big-qrcode"><img :src="scope.row.qrcode" /></p>
						                <img :src="scope.row.qrcode" class="book-qrcode" slot="reference" />
						              </el-popover>
						            </template>
						          </el-table-column>
						          <el-table-column prop="poster" label="推广订单总金额" align="center">
						            <template slot-scope="scope">
						              <el-popover placement="bottom" width="223" trigger="click">
						                <p class="book-big-poster"><img :src="scope.row.poster" /></p>
						                <img :src="scope.row.poster" class="book-poster" slot="reference" />
						              </el-popover>
						            </template>
						          </el-table-column>
						          <el-table-column prop="bookCategory.name" label="获得分成总收益" align="center" min-width="150"
						                           :filters="categoryFilters"
						                           :filter-method="handleCategoryFilter">
						          </el-table-column>
						         
						          <el-table-column label="操作" width="150" class-name="opt-col">
						            <template slot-scope="scope">
						              <el-button type="text" @click="$router.push({name: 'BookDetail',query:{id:scope.row.id}})" size="mini"><i class="el-icon-edit"></i>修改</el-button>
						              <span class="line">|</span>
						              <disable :name="scope.row.status == 1?'下架':'上架'" :icon="scope.row.status == 1?  'el-icon-download':'el-icon-upload2'" type="text" :rowId="scope.row.id.toString()" @emit="onStatusChange" ></disable>
						            </template>
						          </el-table-column>
						        </el-table>
						        <el-pagination class="grid-pager" @current-change="handleCurrentChange" v-if="resp.total>0"
						          :current-page="params.page.page" next-text="下一页"
						          :page-size="  params.page.pageSize" :total="resp.total" layout=" prev, pager, next,total,jumper">
						        </el-pagination>
						      </div>
    
					    </el-tab-pane>
					    <el-tab-pane label="渠道数据" name="second">渠道数据</el-tab-pane>
					    <el-tab-pane label="渠道申请" name="third">渠道申请</el-tab-pane>
					    <el-tab-pane label="设置" name="fourth">设置</el-tab-pane>
					  </el-tabs>
        </div>
    </div>
  </div>
</template>
<script>
  import {getBookList,updateBookStatus,getAllSubCategoryList} from "../../api/book";

  import {fmDate} from "../../utils";
  import Disable from "@/components/Disable";

  export default {
    name:'book-list',
    components:{Disable},
    data(){
      return{
        headerTabName:'BookList',
        params: {
          key: null,
          categoryId:null,
          status:null,
          isDraft:0,
          page: {page: 1, pageSize: 10},
          sort: {order: null, sort: null}
        },
        resp:{
          bookList:[],
          total:0,
        },
        categoryFilters:[],
        distributionTabs:'first',
      }
    },
    methods:{
      handleClick(tab, event) {
        console.log(tab, event);
      },
      formatDate(date){
        return fmDate(date,"yyyy-MM-dd")
      },
      handleCurrentChange(val){
        this.params.page.page = val;
        this.loadData();
      },
      onSearch(){
        console.log("------->",this.params)
        this.params.page.page = 1;
        this.loadData();
      },
      handleCategoryFilter(value, row, column) {
        const property = column['property'];
        // this.params.categoryId = value;
        // this.onSearch();
        return row[property] === value;
      },
      handleStatusFilter(value, row, column) {
        const property = column['property'];
        // this.params.status = value;
        // this.onSearch();
        return row[property] === value;
      },
      onExport(){
        //导出订单
      },
      onStatusChange(id,name){
        let data = {id: id }
        if(name == "上架") data.status = 1;
        else data.status = 0;
        this.handleStatus(data);
      },
      async handleStatus(data){
        let resp = await updateBookStatus(data);
        if(this.qUtil.validResp(resp)){
          this.loadData();
        }else this.$message({ message: resp.msg, type: 'warning' });
      },
      async loadData(){
        let resp = await getBookList(this.params);
        if(this.qUtil.validResp(resp)){
          this.resp.bookList = resp.data.dataList;
          this.resp.total = resp.data.total;
        }else this.$message({ message: resp.msg, type: 'warning' });
      },
      async loadCategory(){
        this.categoryFilters = []
        let resp = await getAllSubCategoryList();
        if(this.qUtil.validResp(resp)){
          let categoryList = resp.data.dataList;
          if(categoryList != null && categoryList.length>0){
            let filterCategory = []
            categoryList.map(m=>{
              if(filterCategory.filter(c=>c.value == m.id).length == 0) filterCategory.push({text:m.name,value:m.id});
            })
            this.categoryFilters = filterCategory;
          }
        }else this.$message({ message: resp.msg, type: 'warning' });
      }
    },
    mounted(){
//    this.loadCategory();
//    this.loadData();
    }
  }

</script>
<style scoped>
	.distribution_mask{
		width: 100%;
		height: 100%;
		background: rgba(0,25,20,0.6);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
	}
	.distribution_mask .maskcon{
		width: 400px;
		height: auto;
		overflow: hidden;
		margin:250px auto 0 auto;
		color: #fff;
		text-align:center;
	}
	.distribution_mask .maskcon i{
		font-size: 180px;
	}
	.distribution_mask .maskcon p{
		font-size: 40px;
		margin-top: 20px;
	}
  .distribution_list .count_list{
     display: flex;
     justify-content: space-around;
     
  }
  .distribution_list .count_list li{
  	width: 31%;
  	height: auto;
  	overflow: hidden;
  	margin: 0 2% 0 0;
  	border:1px #dddddd solid;
  	border-radius:20px;
  	text-align: center;
  	display: flex;
  	justify-content: space-between;
  	padding: 20px 10px 30px 10px;
  	position: relative;
  }
  .distribution_list .count_list li::before{
  	content:'';
  	display:block;
  	position: absolute;
  	left: 50%;
  	top: 32%;
  	width: 1px;
  	height: 40%;
  	background: #eee;
  }
  .distribution_list .count_list li>div{
   	  width:50%;
   	  text-align: center;
  }
  .distribution_list .count_list li>div p{
   	  font-size: 16px;
   	  color: #333;
  }
	.distribution_list .count_list li>div h3{
	  	font-size: 24px;
	  	color: #000;
	}
	.distribution_list .count_list li>div span{
	  	font-size:14px;
	  	color: #999;
	}
	.distribution_list .el-tabs{
			margin: 30px 0 0 0;
	}

</style>
